<template>
  <div class="text-input" v-if="auth">
    <q-input
      ref="input"
      v-model="content"
      type="textarea"
      rows="1"
      :maxlength="maxLength"
      :placeholder="placeholder"
      :autofocus="autofocus"
      color="white"
      class="q-mb-xs no-shadow border-1"
      inverted-light
    />
    <div v-if="button || content" class="row justify-end q-my-md">
      <q-btn v-if="closeButton" color="grey-6" flat label="取消" class="q-mr-md" @click="$emit('close')"/>
      <q-btn :disabled="!content" :loading="loading" color="primary" :label="title" @click="submit"/>
    </div>
  </div>
  <div v-else class="flex flex-center border-1 q-pa-lg border-radius-3">
    <router-link to="/login/">
      <q-btn color="primary" label="请登录"/>
    </router-link>
  </div>
</template>

<script>
    import { handleBreak } from '../utils/string'

    export default {
      name: 'aTextInput',
      props: {
        // value: {
        //   type: String,
        //   required: false,
        //   default: ''
        // },
        title: {
          type: String,
          required: true
        },
        loading: {
          type: Boolean,
          required: false,
          default: false
        },
        placeholder: {
          type: String,
          required: false,
          default: ''
        },
        button: {
          type: Boolean,
          required: false,
          default: true
        },
        closeButton: {
          type: Boolean,
          required: false,
          default: true
        },
        maxLength: {
          type: Number,
          required: false,
          default: 1024
        },
        autofocus: {
          type: Boolean,
          required: false,
          default: false
        }
      },
      data () {
        return {
          content: ''
        }
      },
      methods: {
        submit () {
          this.$emit('submit', handleBreak(this.content))
          this.content = ''
        },
        focus () {
          this.$refs.input.focus()
        }
      }
    }
</script>

<style lang="stylus">
</style>
